<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 200ms ease;
				transition: transform 200ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				position: static;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
				transition: opacity 200ms ease, transform 200ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.mui-locker {
				margin: 35px auto;
				display: none;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 24%;
			}
			
			.mui-input-row label~select,
			.mui-input-row label~input,
			.mui-input-row label~textarea {
				width: 76%;
			}
			
			.mui-input-row span~input {
				float: left;
				width: 32%;
			}
			
			.mui-input-row span~button {
				margin-right: 10px;
				margin-top: 3px;
				width: 41%;
				float: right;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="step1" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>返回
				</button>
				<h1 class="mui-center mui-title">用户注册</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">

				<div class="mui-input-group" style="margin-top: 0px;">

					<div class="mui-input-row">
						<label>手机号</label>
						<input id='account' type="number" autofocus="autofocus" class="mui-input-clear mui-input" placeholder="请输入您的手机号码">
					</div>
					<div class="mui-input-row" style="height: 50px;margin-top: 1px;">
						<label style="margin-top: 10px;">验证码</label>
						<span style=" display:none;"></span>
						<input style="margin-top: 10px;" id='vcode' type="number" class="mui-input" placeholder="请输入验证码">
						<button id="btngetcode" class="mui-btn-primary" style="height: 42px;">获取验证码</button>
					</div>
				</div>
				<div class="mui-content-padded">
					<button id='btn_next1' class="mui-btn mui-btn-block mui-btn-primary" disabled="disabled">下一步</button>
				</div>
				<div class="mui-content-padded">
					<p>注册成功后，您的手机号码将作为用户的帐号登录。</p>
				</div>
			</div>
			<!--页面主内容区结束-->

		</div>
		<div id="step2" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>返回
				</button>
				<h1 class="mui-center mui-title">提交注册</h1>
			</div>
			<div class="mui-page-content">
				<div class="row mui-input-row">
					<textarea id='title_page2' readonly="readonly" style="margin-bottom: -5px;" class="mui-input-clear question"></textarea>
				</div>
				<div class="mui-input-group" style="margin-top: 0px;">
					<div class="mui-input-row">
						<label>姓名</label>
						<input id='name' type="text" class="mui-input-clear mui-input" placeholder="请输入你的姓名">
					</div>
					<div class="mui-input-row">
						<label>工号</label>
						<input id='psno' type="text" class="mui-input-clear mui-input" placeholder="请输入你的工号(可选)">
					</div>
					<div class="mui-input-row">
						<label>密码</label>
						<input id='password' type="password" class="mui-input-password mui-input" placeholder="请输入密码">
					</div>
					<div class="mui-input-row">
						<label>确认</label>
						<input id='password_confirm' type="password" class="mui-input-password mui-input" placeholder="请确认密码">
					</div>
				</div>
				<div class="mui-content-padded">
					<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">确定</button>
				</div>

			</div>
		</div>

	</body>
	<script src="./js/jquery-2.0.3.min.js"></script>
	<script src="./js/mui.min.js "></script>
	<script src="./js/mui.view.js "></script>
	<script src="./js/app.js"></script>
	<script src="./js/aes_key_iv.js"></script>

	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#step1'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		mui.plusReady(function() {
			//initNativeObjects();
			//showSoftInput();
		});
		var view = viewApi.view;
		(function($, doc) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//								console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == "step2") {
					var tilepage2 = doc.getElementById('title_page2');
					tilepage2.value = '向手机号码为【' + doc.getElementById('account').value + '】的验证码已经通过验证，请填入以下信息完成注册'; //					setTimeout(function() {
				}
				if(e.detail.page.id == "step1") {}
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});

			document.getElementById("btngetcode").addEventListener("tap", function() {
				var btn = document.getElementById('btngetcode');
				var phonedata = {
					phoneNum: document.getElementById("account").value
				};

				app.getvcode(phonedata).fail(function(data) {//console.log(JSON.stringify(data));
					plus.nativeUI.toast(data);
					return;
				}).done(function() {
					app.CanAgainTimer(btn, '获取验证码', '秒后重新获取', 60);
					document.getElementById('btn_next1').removeAttribute('disabled');
					document.getElementById("vcode").focus();

				})

			});
			document.getElementById("btn_next1").addEventListener("tap", function() {

				var vcode = document.getElementById('vcode').value;
				var phone = document.getElementById('account').value;
				var vcodedata = {
					"MoudleIndex": 100,
					"ScriptIndex": 118001,
					"Action": 902,
					"ActionStep": 2,
					Params: {
						"@mm_phonenum": phone,
						"@mm_vcode": vcode
					}
				};
				if(vcode.length != 6) {
					plus.nativeUI.toast('请输入正确的验证码');
					return;
				}
				app.apicall(vcodedata).fail(function(err) {//console.log(err);
					plus.nativeUI.toast(err);
					return;
				}).done(function(data) {
					if(mui.isEmptyObject(data)) {
						plus.nativeUI.toast('验证不正确或者已经失效');
						return;
					}
					viewApi.go("#step2");
				});
			});

			var regButton = doc.getElementById('reg');
			var accountBox = doc.getElementById('account');
			var nameBox = doc.getElementById('name');
			var psnoBox = document.getElementById("psno");
			var passwordBox = doc.getElementById('password');
			var passwordConfirmBox = doc.getElementById('password_confirm');
			regButton.addEventListener("tap", function() {
				var regInfo = {
					account: accountBox.value,
					password: passwordBox.value,
					name: nameBox.value,
					psno: psnoBox.value
				};
				var passwordConfirm = passwordConfirmBox.value;
				if(passwordConfirm != regInfo.password) {
					plus.nativeUI.toast('密码两次输入不一致');
					return;
				}
				var p = regInfo.password;
				regInfo.password =  "\""+app.AESencode(p)+ "\"";
				//console.log(regInfo.password );
				app.reg(regInfo).fail(function(err) {
					plus.nativeUI.toast(err);
					return;

				}).done(function() {
					plus.nativeUI.toast('注册成功');
					plus.webview.getLaunchWebview().show("pop-in", 200, function() {
						plus.webview.currentWebview().close("none");
					});
				});
			});
			if(app.isdebug == true) {
				document.getElementById('account').value = '13967161977';
				document.getElementById('btn_next1').removeAttribute('disabled');
				document.getElementById("vcode").value = '888888';
				nameBox.value = '宋晓光';
				passwordBox.value = '888888';
				passwordConfirmBox.value = '888888';
			}
		})(mui, document);
	</script>

</html>